<template>
  <!-- 头部轮播 -->
  <view class="banner">
    <!-- 标题栏和状态栏占位符 -->
    <view class="banner__placing"></view>
    <!-- 背景色区域 -->
    <view class="banner__background" :style="{ backgroundColor: bannerBg }"></view>
    <swiper class="banner__carousel" circular @change="swiperChange">
      <swiper-item
        v-for="(item, index) in list"
        :key="index"
        class="banner__carousel-item"
        @click="handleClick(item)"
      >
        <image class="banner__carousel-img" :src="item.img_url" />
      </swiper-item>
    </swiper>
    <!-- 自定义swiper指示器 -->
    <view class="banner__swiper-dots">
      <text class="num">{{ current + 1 }}</text>
      <text class="sign">/</text>
      <text class="num">{{ list.length }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerBg: '',
      current: 0,
      list: []
    };
  },

  methods: {
    // 获取banner数据
    getBanner() {
      this.$http({
        method: 'GET',
        url: '/api/front/banner'
      }).then(res => {
        this.list = res.data.list;
        this.bannerBg = this.list[0].background;
      });
    },

    // 轮播图切换修改背景色
    swiperChange(event) {
      const index = event.detail.current;
      this.current = index;
      this.bannerBg = this.list[index].background;
    },

    // 点击banner
    handleClick(item) {
      //测试数据没有写id，用title代替
      const isHttp = /^(http|https):\/\/.*/;
      const isPages = /^\/pages\/.*$/;
      if (isHttp.test(item.url)) {
        uni.navigateTo({
          url: `/sub-packages/webview/index?url=${item.url}`
        });
      } else if (isPages.test(item.url)) {
        uni.navigateTo({
          url: item.url
        });
      }
    }
  },
  created() {
    this.getBanner();
  }
};
</script>

<style lang="scss">
.banner {
  position: relative;
  padding-top: 10px;
  background: #fff;

  &__placing {
    height: var(--status-bar-height);
    padding-top: 44px;
    box-sizing: content-box;
  }

  &__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 426rpx;
    transition: 0.4s;
  }

  &__carousel {
    width: 100%;
    height: 350rpx;

    &-img {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }

    &-item {
      width: 100%;
      height: 100%;
      padding: 0 28rpx;
      overflow: hidden;
    }
  }

  &__swiper-dots {
    display: flex;
    position: absolute;
    left: 60rpx;
    bottom: 15rpx;
    width: 72rpx;
    height: 36rpx;
    background-image: url();
    background-size: 100% 100%;

    .num {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50px;
      font-size: 24rpx;
      color: #fff;
      text-align: center;
      line-height: 36rpx;
    }

    .sign {
      position: absolute;
      top: 0;
      left: 50%;
      line-height: 36rpx;
      font-size: 12rpx;
      color: #fff;
      transform: translateX(-50%);
    }
  }
}

/* #ifdef MP */
.banner {
  padding: 0;

  &__placing {
    padding-top: 0;
    height: 0;
  }

  &__carousel {
    &-item {
      padding: 0;
    }
  }

  &__swiper-dots {
    left: 45rpx;
    bottom: 40rpx;
  }
}
/* #endif */
</style>
